<style lang='stylus' scoped>
page {
  height: 100%;
}

.content {
  width: 100vw;
  height: 100vh;
  background-color: #f1f1f1;
}

.header {
  width: 100%;
  height: 500upx;
}

.i-btn2 {
  width: 600upx;
  color: #fff !important;
  background: #03a4ec !important;
  margin: 0 auto !important;
}

.timeBox {
  width: 300rpx;
  height: 100rpx;
  background-color: #4ebff2;
  margin: 30rpx auto;
  text-align: center;
}

.timeBoxLeft {
  width: 20rpx;
  height: 40rpx;
  background-color: #4ebff2;	
  margin: 30rpx auto;
  text-align: center;
}
</style>
<template>
  <view class="ft28 content pdt20">
    <view class="bgw mg16-x pd20  radius-16">
      <view class="item-header flex flex-between border-bottom pdb20">
        <text class="ft30" style="color:#000">订单号:{{order.outTradeNo}}</text>
      </view>

      <view class="item-body pdt20">
        <view class="cell flex flex-between mgb12">
          <view class="">
            <text class="dlc-gray">订单状态</text>
          </view>

          <view class="flex flex-between ">
            <text :class="order.payStatus == 1?'dlc-danger'
                     :order.payStatus ==2?'dlc-success'
                     :order.payStatus ==3?'dlc-success'
                     :order.payStatus ==4?'dlc-success'
                     :order.payStatus ==5?'dlc-warning'
                     :'dlc-success'">
              {{order.payStatus==1?"待充电"
              :order.payStatus==2?"充电失败"
              :order.payStatus==3?"进行中"
              :order.payStatus==4?"待支付"
              :order.payStatus==5?"已支付"
              :order.payStatus==6?"不计费"
              :order.payStatus==7?"退款"
			  :order.payStatus==8?"充电柜充电结束":"未知"}}
            </text>
          </view>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">订单类型</text>
          <text>{{order.orderType==1?"按次数收费":"按时收费"}}</text>
        </view>
     
        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">充电时长</text>
          <text>{{order.useTimeQuantum}}</text>
        </view>

        <view class="cell flex flex-between mgb12" v-if="order.payType==4">
          <text class="dlc-gray">卡号</text>
          <text>{{order.cardNo}}</text>
        </view>

        <view v-if="order.payType!=4" class="cell flex flex-between mgb12">
          <text class="dlc-gray">支付金额</text>
          <text v-if="order.payStatus==6">-</text>
          <text v-else>{{order.orderAmount/100}}元</text>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">支付类型</text>
          <text>
            {{order.payType==1?"微信":
            order.payType==2?"支付宝":
            order.payType==3?"余额":
            order.payType==4?"月卡":
            order.payType==5?"IC卡":
            order.payType==6? "线下":
            "-"}}
          </text>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">充电桩编号</text>
          <text>{{order.equipmentNumber}}</text>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">使用充电桩端口号</text>
          <text>{{order.mouthNoShow}}号口</text>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">充电开始时间</text>
          <text>{{order.ctime}}</text>
        </view>

        <view class="cell flex flex-between mgb12">
          <text class="dlc-gray">充电结束时间</text>
          <text>{{order.etime}}</text>
        </view>

        <view class="cell flex flex-between mgb12" v-if="order.payStatus==4||order.payStatus==5">
          <text class="dlc-gray">结束原因</text>
          <text>
            {{
            order.endReason==null?"-"
            :order.endReason==0?"充电结束"
            :order.endReason==1?"充电结束"
            :order.endReason==2?"充电结束"
            :order.endReason==3?"异常结束"
            :order.endReason==4?"异常结束"
            :order.endReason==5?"异常结束"
            :order.endReason==6?"异常结束"
            :order.endReason==7?"异常结束"
            :order.endReason==8?"异常结束"
            :order.endReason==9?"异常结束"
            :order.endReason==10?"异常结束"
            :order.endReason==11?"充电结束"
            :order.endReason==12?"异常结束"
            :order.endReason==13?"异常结束"
            :order.endReason==14?"异常结束"
            :order.endReason==15?"异常结束"
            :order.endReason==16?"异常结束"
            :order.endReason==17?"充电结束"
            :"-"}}
          </text>
        </view>

        <!-- 退款 -->
        <view v-if="order.payStatus==6||order.payStatus==7||order.payStatus==8">
          <view class="cell flex flex-between mgb12" v-if="order.orderRefundAmount!=0">
            <text class="dlc-gray">退款金额:</text>
            <text>{{order.orderRefundAmount+orderRefundGivenAmount/100}}元</text>
          </view>
          <view class="cell flex flex-between mgb12" v-if="order.orderRefundAmount!=0">
            <text class="dlc-gray">赠送金额退款:</text>
            <text>{{order.orderRefundGivenAmount/100}}元</text>
          </view>
          <view
            class="cell flex flex-between mgb12"
            v-if="order.orderRefundAmount+order.orderRefundGivenAmount!==0"
          >
            <text class="dlc-gray">退款原因:</text>
            <text>{{order.orderRefundReason==null?"-":order.orderRefundReason}}</text>
          </view>
        </view>
      </view>
 <!-- v-if="order.payStatus==3" -->
     

      <!-- <view class="timeBox radius-16" v-if="timeBoxVisible&&order.payStatus==3">
        <text>剩余充电时间</text>
        <i-count-down
          class="timeBoxNum"
          :target="targetTime"
          @callback="myLinsterner"
          :clear-timer="clearTimer"
        ></i-count-down>
      <text>倒计时状态：{{status}}</text> 
       <view class="timeBoxLeft"> </view>  
      </view>-->
	  <view class="cell mgt20">
	      <i-button
	        i-class="i-btn2"
	  	  v-if="order.payStatus==3"
	        :loading="openLoading"
	        @click="overTipVisible"
	        type="primary"
	        shape="circle"
	      >结束充电</i-button>
	    </view>
	    
	    <view class="cell mgt20" v-if="openDoorDisplay">
	        <i-button
	          i-class="i-btn2"
	          @click="openDoor"
	          type="primary"
	          shape="circle"
	        >开门取电</i-button>
	      </view>
    </view>


    <i-message id="message" />
    <i-modal title="提示" :visible="openVisible" @ok="getOpenLocks" @cancel="cancelOverTipVisible">
      <view>确定结束充电？</view>
    </i-modal>
  </view>
</template>

<script>
import { getOpenFlag, getOpenLock,getOpenDoor } from "@/api";
import { parseTime, getdTime } from "@/utils";
const { $Message } = require("@/wxcomponents/iview/base/index");
import store from "@/store";
export default {
  data() {
    return {
      targetTime: 0,
      myFormat: ["时", "分", "秒"],
      myFormat1: ["天", "时", "分", "秒"],
      status: "进行中...",
      clearTimer: false,
      timeBoxVisible: false,
      order: {},
      openVisible: false,								//控制结束充电二次确认弹框是否出现
      openLoading: false,
      openStatus: false,
      orderTimes: null,
    };
  },
  methods: {
    //结束充电
    async getOpenLocks() {
      this.openLoading = true;
      this.openStatus = false;
      //调用服务器接口
	
      const { data } = await getOpenLock({
        orderId: this.order.orderId,
      });
      if (data.code == 1) {
        $Message({
          content: "结束充电指令发送成功,因网络原因,请稍等片刻",
          type: "success",
          duration: 3,
        });
        this.openLoading = false;

        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/personal/index",
          });
        }, 1000);
      } else {
        $Message({
          content: "结束充电失败，请联系后台手动结束订单",
          type: "error",
          duration: 3,
        });
        this.openLoading = false;
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/personal/index",
          });
        }, 1000);
      }
    },
	// 开门取电按钮
	async openDoor() {
		const {data} = await getOpenDoor({orderId: this.order.orderId})
		 if (data.code == 1) {
		   $Message({
		     content: "开门指令发送成功,因网络原因,请稍等片刻",
		     type: "success",
		     duration: 3,
		   });
		 // 跳转到个人页面
		   setTimeout(() => {
		     uni.reLaunch({
		       url: "/pages/personal/index",
		     });
		   }, 1000);
		 } else {
		   $Message({
		     content: "开门取电失败，请联系后台手动结束订单",
		     type: "error",
		     duration: 3,
		   });
		   // 依旧跳转到个人页面
		   setTimeout(() => {
		     uni.reLaunch({
		       url: "/pages/personal/index",
		     });
		   }, 1000);
		 }
	},
    // 发送orderId获取订单数据
    async getOpenFlags(Id) {
      //调用服务器接口
      const { data } = await getOpenFlag({
        orderId: Id,
      });
      console.log(data,111);
      if (data.code == 1) {
        console.log(data)
        this.order = data.data;

        this.order.ctime =
          data.data.ctime === null
            ? "-"
            : data.data.ctime.slice(0, 19);
        this.order.etime =
          data.data.etime == null
            ? "-"
            : data.data.etime.slice(0, 19);
        this.order.useTimeQuantum =
          data.data.useTimeQuantum == ""
            ? "-"
            : getdTime(data.data.useTimeQuantum);
        this.openStatus = data.data.open;
  
      }
    },
	// 结束充电的按钮绑定函数
    overTipVisible() {
      this.openVisible = true;
    },
	  // 判断开门取电按钮是否该显示
	 //  openDoorDisplay() {
		// const displaySwitch = Boolean((this.order.payStatus==1||this.order.payStatus==2||this.order.payStatus==8)&&(this.order.equipmentType==5))
		// console.log(displaySwitch)
		// return displaySwitch
	 //  },
	// 结束充电二次确认弹框的取消按钮
    cancelOverTipVisible() {
      this.openVisible = false;
    },
  },
  computed: {
  	  //判断开门取电按钮是否该显示
  	  openDoorDisplay() {
  	  	const displaySwitch = Boolean((this.order.payStatus==1||this.order.payStatus==2||this.order.payStatus==8)&&(this.order.equipmentType==5))
  	  	return displaySwitch
  	  },
  },
  onLoad(options) {
	  // this.openDoorDisplay()
    if (options) {
      this.getOpenFlags(options.orderId);
      try {
        uni.setStorageSync("order", options.orderId);
      } catch (e) {
        // error
      }
    }
  },
  onShow() {
  },
  onUnload() {
  },
  // 下拉刷新
  onPullDownRefresh() {
	// this.openDoorDisplay()
    try {
      const value = uni.getStorageSync("order");
      if (value) {
        this.getOpenFlags(value);
      }
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1500);
    } catch (e) {
      // error
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1500);
    }
  },
};
</script>

